<template>
  <div class="createPost-container" style="margin:20px">
    <el-form v-if="!infoLoading" ref="postForm" :model="postForm" :rules="rules" class="form-container" label-width="100px">
      <div class="createPost-main-container">
        <template v-if="type===1">
          <el-form-item label="公司名称" prop="companyName">
            <span>{{ postForm.companyName }}</span>
          </el-form-item>
          <el-form-item label="公司证件类型" prop="companyCertType">
            <span>{{ postForm.companyCertType?companyCertTypes[postForm.companyCertType-1]:'' }}</span>
          </el-form-item>
          <el-form-item label="公司证件编号" prop="companyCertNum">
            <span>{{ postForm.companyCertNum }}</span>
          </el-form-item>
          <el-form-item label="证件照片" prop="companyAuthPics">
            <el-image
              v-for="(item,index) in postForm.companyPics"
              :key="'company'+index"
              style="width: 100px; height: 100px;margin-right:10px"
              :src="item"
              :preview-src-list="postForm.companyPics"
            />
          </el-form-item>
          <el-form-item label="公司地址" prop="companyAddress">
            <span>{{ postForm.companyAddress }}</span>
          </el-form-item>
          <el-form-item label="提交认证时间" prop="companyAuthSubmitTime">
            <span>{{ postForm.companyAuthSubmitTime }}</span>
          </el-form-item>
          <el-form-item label="审核状态" prop="companyAuthStatus">
            <span>{{ statusList.find(item=>item.id==postForm.companyAuthStatus).label }}</span>
          </el-form-item>
          <template v-if="postForm.companyAuthStatus===1">
            <el-form-item label="是否通过" prop="auditState">
              <el-radio-group v-model="postForm.auditState">
                <el-radio :label="2">通过</el-radio>
                <el-radio :label="3">未通过</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item v-if="postForm.auditState==3" label="未通过原因" prop="auditResult">
              <el-input v-model="postForm.auditResult" style="width:810px" />
            </el-form-item>
            <el-form-item style="margin-bottom: 30px;">
              <el-button type="primary" :loading="loading" @click="submitAudit">提交</el-button>
            </el-form-item>
          </template>
        </template>
        <template v-if="type===2">
          <el-form-item label="姓名" prop="personName">
            <span>{{ postForm.personName }}</span>
          </el-form-item>
          <el-form-item label="个人证件类型" prop="personCertType">
            <span>{{ postForm.personCertType?personCertTypes[postForm.personCertType-1]:'' }}</span>
          </el-form-item>
          <el-form-item label="个人证件编号" prop="personCertNum">
            <span>{{ postForm.personCertNum }}</span>
          </el-form-item>
          <el-form-item label="证件照片" prop="personAuthPics">
            <el-image
              v-for="(item,index) in postForm.personPics"
              :key="'person'+index"
              style="width: 100px; height: 100px;margin-right:10px"
              :src="item"
              :preview-src-list="postForm.personPics"
            />
          </el-form-item>
          <el-form-item label="提交认证时间" prop="personAuthSubmitTime">
            <span>{{ postForm.personAuthSubmitTime }}</span>
          </el-form-item>
          <el-form-item label="审核状态" prop="personAuthStatus">
            <span>{{ statusList.find(item=>item.id==postForm.personAuthStatus).label }}</span>
          </el-form-item>
          <template v-if="postForm.personAuthStatus===1">
            <el-form-item label="是否通过" prop="auditState">
              <el-radio-group v-model="postForm.auditState">
                <el-radio :label="2">通过</el-radio>
                <el-radio :label="3">未通过</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item v-if="postForm.auditState==3" label="未通过原因" prop="auditResult">
              <el-input v-model="postForm.auditResult" style="width:810px" />
            </el-form-item>
            <el-form-item style="margin-bottom: 30px;">
              <el-button type="primary" :loading="loading" @click="submitAudit">提交</el-button>
            </el-form-item>
          </template>
        </template>
      </div>
    </el-form>
  </div>
</template>

<script>

const defaultForm = {
  auditState: '',
  auditResult: '',
  id: null
}

export default {
  name: 'ArticleDetail',
  props: {
    type: {
      type: Number,
      default: 0
    },
    readOnly: {
      type: Boolean,
      default: false
    },
    infoid: {
      type: Number,
      default: null
    },
    timestamp: {
      type: Number,
      default: 0
    }
  },
  data() {
    const validateRequire = (rule, value, callback) => {
      if (!value || value === '') {
        callback(new Error('必填项'))
      } else {
        callback()
      }
    }
    return {
      statusList: [{ id: 0, label: '待支付' }, { id: 1, label: '待审核' }, { id: 2, label: '审核通过' }, { id: 3, label: '未通过' }],
      personCertTypes: [
        '身份证',
        '护照',
        '其他'
      ],
      companyCertTypes: [
        '营业执照',
        '组织机构代码证',
        '事业单位法人证书',
        '其他'
      ],
      myHeaders: {},
      infoLoading: false,
      postForm: Object.assign({}, defaultForm),
      loading: false,
      roleOption: [{ label: '录入员', value: 1 }, { label: '录入管理员', value: 2 }, { label: '管理员', value: 3 }],
      rules: {
        username: [{ validator: validateRequire }],
        usertype: [{ validator: validateRequire }]
      },
      tempRoute: {}
    }
  },
  watch: {
    timestamp: {
      handler(val, oldVal) {
        console.log('timestamp:' + val)
        this.getData(this.infoid)
      },
      immediate: true
    }
  },
  mounted() {
    this.myHeaders = {
      Authorization: 'Bearer ' + localStorage.getItem('token')
    }
  },
  created() {
    // Why need to make a copy of this.$route here?
    // Because if you enter this page and quickly switch tag, may be in the execution of the setTagsViewTitle function, this.$route is no longer pointing to the current page
    // https://github.com/PanJiaChen/vue-element-admin/issues/1221
    this.tempRoute = Object.assign({}, this.$route)
  },
  methods: {
    submitAudit() {
      if (this.postForm.auditState === 0 && this.postForm.auditResult === '') {
        this.$message({
          message: '审核不通过请说明原因',
          type: 'error'
        })
      } else {
        const para = {
          id: this.postForm.id,
          companyAuthReason: this.postForm.auditResult,
          companyAuthStatus: this.postForm.auditState,
          personAuthReason: this.postForm.auditResult,
          personAuthStatus: this.postForm.auditState
        }
        this.loading = true
        this.$http
          .post(this.type === 1 ? '/api/busWxUser/saveCompanyAuth' : '/api/busWxUser/savePersonAuth', para)
          .then(response => {
            this.loading = false
            if (response.data.success === true) {
              this.$message({
                message: '操作成功',
                type: 'success'
              })
              this.$emit('dialogHide')
              this.postForm = Object.assign({}, defaultForm)
              this.loading = false
            } else {
              console.log('操作失败:' + response.data.message)
              this.$message({
                message: '操作失败:' + response.data.message,
                type: 'error'
              })
            }
          })
          .catch(error => {
            console.log(error)
            this.loading = false
          })
      }
    },
    getData(id) {
      this.infoLoading = true
      if (id) {
        this.$http
          .get('/api/busWxUser/getById?id=' + id)
          .then(response => {
            this.infoLoading = false
            if (response.data.success === true) {
              this.postForm = response.data.result
              if (this.postForm.companyAuthPics && JSON.parse(this.postForm.companyAuthPics).length > 0) {
                console.log
                this.postForm.companyPic = this.$http.defaults.baseURL + 'api/mpfile/download?id=' + JSON.parse(this.postForm.companyAuthPics)[0]
                this.postForm.companyPics = []
                JSON.parse(this.postForm.companyAuthPics).forEach(item => { this.postForm.companyPics.push(this.$http.defaults.baseURL + 'api/mpfile/download?id=' + item) })
              }
              if (this.postForm.personAuthPics && JSON.parse(this.postForm.personAuthPics).length > 0) {
                this.postForm.personPic = this.$http.defaults.baseURL + 'api/mpfile/download?id=' + JSON.parse(this.postForm.personAuthPics)[0]
                this.postForm.personPics = []
                JSON.parse(this.postForm.personAuthPics).forEach(item => { this.postForm.personPics.push(this.$http.defaults.baseURL + 'api/mpfile/download?id=' + item) })
              }
              this.postForm.personAuthPics
            } else {
              console.log('获取失败:' + response.data.message)
              this.$message({
                message: '获取失败:' + response.data.message,
                type: 'error'
              })
            }
          })
          .catch(error => {
            console.log(error)
            this.infoLoading = false
          })
      } else {
        this.$nextTick(() => {
          this.infoLoading = false
        })
        this.postForm = Object.assign({}, defaultForm)
        this.imageUrl = ''
      }
    },
    submitForm() {
      console.log(this.postForm)
      this.$refs.postForm.validate(valid => {
        if (valid) {
          const para = {
            username: this.postForm.username,
            usertype: this.postForm.usertype,
            userEnabled: this.postForm.userEnabled,
            id: this.postForm.id ? this.postForm.id : null
          }
          this.loading = true
          this.$http
            .post('/api/sysUser/save', para)
            .then(response => {
              this.loading = false
              if (response.data.success === true) {
                this.$message({
                  message: '提交成功',
                  type: 'success'
                })
                this.postForm = Object.assign({}, defaultForm)
                this.$emit('dialogHide')
              } else {
                console.log('提交失败:' + response.data.message)
                this.$message({
                  message: '提交失败:' + response.data.message,
                  type: 'error'
                })
              }
            })
            .catch((error) => {
              console.log(error)
              this.loading = false
            })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
@import "~@/styles/mixin.scss";

.createPost-container {
  position: relative;

  .createPost-main-container {
    // padding: 40px 45px 20px 50px;

    .postInfo-container {
      position: relative;
      @include clearfix;
      margin-bottom: 10px;

      .postInfo-container-item {
        float: left;
      }
    }
  }

  .word-counter {
    width: 40px;
    position: absolute;
    right: 10px;
    top: 0px;
  }
}

.article-textarea ::v-deep {
  textarea {
    padding-right: 40px;
    resize: none;
    border: none;
    border-radius: 0px;
    border-bottom: 1px solid #bfcbd9;
  }
}
</style>

